<template>
    <el-card class="index">
      <div slot="header" class="clearfix">
        <span>图片资质上传</span>
        <!-- <span><el-switch style="display: block"  v-model="form.value"  active-color="#13ce66" inactive-color="#D9D9D9" :inactive-value="false" :active-value="true" active-text="开"  inactive-text="关" /></span> -->
     </div>
     <div class="form">
        <el-form label-position="top" :model="form" :inline="true" :rules="formRules" ref="formRules" label-width="150px" >
            <el-row>
             <el-col :span="6">
               <el-form-item label="营业执照" prop="imgF07" >
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :show-file-list="false"
                  :on-success="doorUpLoadSuccess"
                  :before-upload="beforeUploadImgF07"
                  >
                  <img v-if="form.imgF07" :src="form.imgF07" class="avatar">
                  <img class="avatar-none" v-else src="http://sb-merchant-image.oss-cn-hangzhou.aliyuncs.com/common/202406191758468871.png" alt="">
                  <!-- <i v-else class="el-icon-plus"></i> -->
                </el-upload>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="联系人身份证正面照片" prop="imgF02" >
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :show-file-list="false"
                  :before-upload="beforeUploadImgF02"
                  :on-success="doorUpLoadSuccessF02"
                  >
                  <img v-if="form.imgF02" :src="form.imgF02" class="avatar">
                  <img class="avatar-none" v-else src="http://sb-merchant-image.oss-cn-hangzhou.aliyuncs.com/common/202406191758468871.png" alt="">
                  <!-- <i v-else class="el-icon-plus"></i> -->
                </el-upload>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="联系人身份证反面照片" prop="imgF03" >
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :show-file-list="false"
                  :before-upload="beforeUploadImgF03"
                  :on-success="doorUpLoadSuccessF03"
                  >
                  <img v-if="form.imgF03" :src="form.imgF03" class="avatar">
                  <img class="avatar-none" v-else src="http://sb-merchant-image.oss-cn-hangzhou.aliyuncs.com/common/202406191758468871.png" alt="">
                </el-upload>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="结算卡正面照片" prop="imgF13" >
                <el-upload
                :action="uploadUrl"
                :headers="token"
                  :show-file-list="false"
                  :before-upload="beforeUploadImgzF13"
                  :on-success="doorUpLoadSuccesszF13"
                  >
                  <img v-if="form.imgF13" :src="form.imgF13" class="avatar">
                  <img class="avatar-none" v-else src="http://sb-merchant-image.oss-cn-hangzhou.aliyuncs.com/common/202406191758468871.png" alt="">
                </el-upload>
               </el-form-item>
             </el-col>
             </el-row>
            <el-row>
                <el-col :span="6">
                 <el-form-item label="结算卡反面照片" prop="imgF14" >
                   <el-upload
                   :action="uploadUrl"
                   :headers="token"
                     :show-file-list="false"
                     :before-upload="beforeUploadImgF14"
                     :on-success="doorUpLoadSuccessF14"
                     >
                     <img v-if="form.imgF14" :src="form.imgF14" class="avatar">
                     <img class="avatar-none" v-else src="http://sb-merchant-image.oss-cn-hangzhou.aliyuncs.com/common/202406191758468871.png" alt="">
                   </el-upload>
                  </el-form-item> 
                </el-col>
                <el-col :span="6" v-if="userType == '2'">
                 <el-form-item label="开户许可证" prop="imgF08" >
                   <el-upload
                   :action="uploadUrl"
                   :headers="token"
                     :show-file-list="false"
                     :before-upload="beforeUploadImgfF08"
                     :on-success="doorUpLoadSuccessfF08"
                     >
                     <img v-if="form.imgF08" :src="form.imgF08" class="avatar">
                     <img class="avatar-none" v-else src="http://sb-merchant-image.oss-cn-hangzhou.aliyuncs.com/common/202406191758468871.png" alt="">
                   </el-upload>
                  </el-form-item> 
                </el-col>
                <el-col :span="6" v-if="userType == '2'">
                 <el-form-item label="对公账户其它材料" prop="imgF12" >
                   <el-upload
                   :before-upload="beforeUploadImgfF12"
                     :on-success="doorUpLoadSuccessfF12"
                   :action="uploadUrl"
                   :headers="token"
                     :show-file-list="false"
                     >
                     <img v-if="form.imgF12" :src="form.imgF12" class="avatar">
                     <img class="avatar-none" v-else src="http://sb-merchant-image.oss-cn-hangzhou.aliyuncs.com/common/202406191758468871.png" alt="">
                   </el-upload>
                  </el-form-item> 
                </el-col>
                <el-col :span="6">
                 <el-form-item label="协议" prop="F09" >
                   <el-upload
                   :action="uploadUrl"
                   :headers="token"
                     :show-file-list="false"
                     :before-upload="beforeUploadImgfF09"
                     :on-success="doorUpLoadSuccessfF09"
                     >
                     <img v-if="form.imgF09" :src="form.imgF09" class="avatar">
                     <img class="avatar-none" v-else src="http://sb-merchant-image.oss-cn-hangzhou.aliyuncs.com/common/202406191758468871.png" alt="">
                   </el-upload>
                  </el-form-item> 
                </el-col>
            </el-row>
        </el-form>
     </div>
    </el-card>
</template>

<script>
export default{
    name:'imgQualification',
    props:{
        merchantId:[String,Number],
        userType:[String,Number],
        editFileList:[Array]
    },
    data(){
        return{
            uploadUrl: process.env.VUE_APP_BASE_URL + `/product/v31/api/merchant/huifu/upload/`,
            token: { token: sessionStorage.getItem("token") },
            file_type:'',
            // merchantId:'',
            form:{
              value:true,
            },
            file_list:[],
            formRules:{
                imgF07:[{required: this.userType == 1 ? false : true, validator:(rule , value , callback)=>{
                    if(this.userType == 2){
                        if(this.form.imgF07){
                        callback();
                        }else{
                            callback(new Error('请上传营业执照！'))
                        }
                    }else{
                        callback();
                    }
                 } }],
                 imgF02:[{required: true, validator:(rule , value , callback)=>{
                    if(this.form.imgF02){
                        callback();
                    }else{
                        callback(new Error('请上传联系人身份证正面照片！'))
                    }
                 } }],
                 imgF03:[{required: true, validator:(rule , value , callback)=>{
                    if(this.form.imgF03){
                        callback();
                    }else{
                        callback(new Error('请上传联系人身份证反面照片！'))
                    }
                 } }],
                 imgF13:[{required: true, validator:(rule , value , callback)=>{
                    if(this.form.imgF13){
                        callback();
                    }else{
                        callback(new Error('请上传结算卡正面照片！'))
                    }
                 } }],
                 imgF14:[{required: true, validator:(rule , value , callback)=>{
                    if(this.form.imgF14){
                        callback();
                    }else{
                        callback(new Error('请上传结算卡反面照片！'))
                    }
                 } }],
                 imgF08:[{required: true, validator:(rule , value , callback)=>{
                    if(this.form.imgF08){
                        callback();
                    }else{
                        callback(new Error('请上传开户许可证！'))
                    }
                 } }],
                 imgF12:[{required: true, validator:(rule , value , callback)=>{
                    if(this.form.imgF12){
                        callback();
                    }else{
                        callback(new Error('请上传对公账户其它材料！'))
                    }
                 } }],
            },
        }
    },
    watch:{
        file_list:{
            handler(nValue , oValue){
               this.$emit('fileListChange' ,nValue)
            },
            deep:true
        },
        editFileList:{
            handler(nValue , oValue){
                nValue.forEach(item=>{
                    this.form[`img${item.file_type}`] =  item.file_url
                })
                this.file_list = nValue
                this.$forceUpdate()
            },
            deep:true
        }
    },
    methods:{
        beforeUploadImgF07(){
            return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/product/v31/api/merchant/huifu/upload/`
                this.uploadUrl = this.uploadUrl + 'F07/' + this.merchantId
                setTimeout(() => {
                    resolve() 
                }, 100)
                
          })
        },
        beforeUploadImgF02(){
            return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/product/v31/api/merchant/huifu/upload/`
                this.uploadUrl = this.uploadUrl + 'F02/' + this.merchantId
                setTimeout(() => {
                    resolve() 
                }, 100)  
          })
        },
        beforeUploadImgF03(){
            return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/product/v31/api/merchant/huifu/upload/`
                this.uploadUrl = this.uploadUrl + 'F03/' + this.merchantId
                setTimeout(() => {
                    resolve() 
                }, 100)  
          })
        },
        beforeUploadImgzF13(){
            return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/product/v31/api/merchant/huifu/upload/`
                this.uploadUrl = this.uploadUrl + 'F13/' + this.merchantId
                setTimeout(() => {
                    resolve() 
                }, 100)  
          })
        },
        beforeUploadImgF14(){
            return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/product/v31/api/merchant/huifu/upload/`
                this.uploadUrl = this.uploadUrl + 'F13/' + this.merchantId
                setTimeout(() => {
                    resolve() 
                }, 100)  
          })
        },
        beforeUploadImgfF08(){
            return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/product/v31/api/merchant/huifu/upload/`
                this.uploadUrl = this.uploadUrl + 'F08/' + this.merchantId
                setTimeout(() => {
                    resolve() 
                }, 100)  
          })
        },
        beforeUploadImgfF12(){
            return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/product/v31/api/merchant/huifu/upload/`
                this.uploadUrl = this.uploadUrl + 'F12/' + this.merchantId
                setTimeout(() => {
                    resolve() 
                }, 100)  
          })
        },
        beforeUploadImgfF09(){
            return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/product/v31/api/merchant/huifu/upload/`
                this.uploadUrl = this.uploadUrl + 'F09/' + this.merchantId
                setTimeout(() => {
                    resolve() 
                }, 100)  
          })
        },
        doorUpLoadSuccessfF09(file){
            if(file.code == 500){
                this.$message.error(file.message)
                return
            }
            this.form.imgF09 = file.data.file_url
            const index =  this.file_list.findIndex(item=>item.file_name ==  'F09' )
            if(index>=0){
               this.file_list[index].file_id = file.data.file_id
               this.file_list[index].file_url = file.data.file_url
            }else{
                this.file_list.push({file_name:'F09',file_id:file.data.file_id , file_type:'F09',file_url:file.data.file_url})
            }
            this.$forceUpdate()
        },
        doorUpLoadSuccessfF12(file){
            if(file.code == 500){
                this.$message.error(file.message)
                return
            }
            this.form.imgF12 = file.data.file_url
            const index =  this.file_list.findIndex(item=>item.file_name ==  'F12' )
            if(index>=0){
               this.file_list[index].file_id = file.data.file_id
               this.file_list[index].file_url = file.data.file_url
            }else{
                this.file_list.push({file_name:'F12',file_id:file.data.file_id , file_type:'F12' , file_url:file.data.file_url})
            }
            this.$forceUpdate()
        },
        doorUpLoadSuccessfF08(file){
            if(file.code == 500){
                this.$message.error(file.message)
                return
            }
            this.form.imgF08 = file.data.file_url
            const index =  this.file_list.findIndex(item=>item.file_name ==  'F08' )
            if(index>=0){
               this.file_list[index].file_id = file.data.file_id
               this.file_list[index].file_url = file.data.file_url
            }else{
                this.file_list.push({file_name:'F08',file_id:file.data.file_id , file_type:'F08' , file_url:file.data.file_url})
            }
            this.$forceUpdate()
        },
        doorUpLoadSuccessF14(file){
            if(file.code == 500){
                this.$message.error(file.message)
                return
            }
            this.form.imgF14 = file.data.file_url
            const index =  this.file_list.findIndex(item=>item.file_name ==  'F14' )
            if(index>=0){
               this.file_list[index].file_id = file.data.file_id
               this.file_list[index].file_url = file.data.file_url
            }else{
                this.file_list.push({file_name:'F14',file_id:file.data.file_id , file_type:'F14' , file_url:file.data.file_url})
            }
            this.$forceUpdate()
        },
        doorUpLoadSuccesszF13(file){
            if(file.code == 500){
                this.$message.error(file.message)
                return
            }
            this.form.imgF13 = file.data.file_url
            const index =  this.file_list.findIndex(item=>item.file_name ==  'F13' )
            if(index>=0){
               this.file_list[index].file_id = file.data.file_id
               this.file_list[index].file_url = file.data.file_url
            }else{
                this.file_list.push({file_name:'F13',file_id:file.data.file_id , file_type:'F13' , file_url:file.data.file_url})
            }
            this.$forceUpdate()
        },
        doorUpLoadSuccessF03(file){
            if(file.code == 500){
                this.$message.error(file.message)
                return
            }
            this.form.imgF03 = file.data.file_url
            const index =  this.file_list.findIndex(item=>item.file_name ==  'F03' )
            if(index>=0){
               this.file_list[index].file_id = file.data.file_id
               this.file_list[index].file_url = file.data.file_url
            }else{
                this.file_list.push({file_name:'F03',file_id:file.data.file_id , file_type:'F03' , file_url:file.data.file_url})
            }
            this.$forceUpdate()
        },
        doorUpLoadSuccessF02(file){
            if(file.code == 500){
                this.$message.error(file.message)
                return
            }
            this.form.imgF02 = file.data.file_url
            const index =  this.file_list.findIndex(item=>item.file_name ==  'F02' )
            console.log(index)
            // return
            if(index>=0){
               this.file_list[index].file_id = file.data.file_id
               this.file_list[index].file_url = file.data.file_url
            }else{
                this.file_list.push({file_name:'F02',file_id:file.data.file_id , file_type:'F02' , file_url:file.data.file_url})
            }
            this.$forceUpdate()
        },
        doorUpLoadSuccess(file){
            // console.log(file)
            if(file.code == 500){
                this.$message.error(file.message)
                return
            }
            this.form.imgF07 = file.data.file_url
            const index =  this.file_list.findIndex(item=>item.file_type ==  file.data.file_type )
            if(index>=0){
               this.file_list[index].file_id = file.data.file_id
               this.file_list[index].file_url = file.data.file_url
            }else{
                this.file_list.push({file_name:'F07',file_id:file.data.file_id , file_type:'F07' , file_url:file.data.file_url})
            }
            this.$forceUpdate()
        }
    }
}

</script>

<style scoped>
   .index{
    width: 100%;
    margin-bottom: 30px;
   }
   .clearfix{
    display: flex;
    align-items: center;
    justify-content: space-between;
   }
   .avatar{
    width: 126px;
    height: 102px;
  }
.avatar-none{
    width: 126px;
    height: 102px;
}
::v-deep .el-form-item--small.el-form-item{
    text-align: center;
    /* margin-right: 130px; */
}
::v-deep .el-col{
    display:flex;
    justify-content:center;
}
::v-deep .el-upload--text{
    width: 126px !important;
    height: 102px !important;
    line-height: 102px !important;
}
</style>